<template>
  <view>
    <uni-nav-bar :title="'郑州'" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <view class="uni-form-item uni-column">
      <input
        class="uni-input"
        confirm-type="search"
        placeholder="请输入选择的城市"
        v-model="searchLoc"
        @confirm="search"
        @input="search"
      />
    </view>
    <view v-if="name" class="name" @click="comback()">{{ name }}</view>
    <view class="locationList" v-if="!name" style="margin-top: 0px;">
      <view class="title">定位/最近访问</view>
      <view>
        <text>郑州</text>
        <text>新乡</text>
        <text>焦作</text>
        <text>济源</text>
      </view>
    </view>
    <view class="locationList" v-if="!name">
      <view class="title">热门城市</view>
      <view>
        <text>郑州</text>
        <text>新乡</text>
        <text>焦作</text>
        <text>济源</text>
      </view>
    </view>
    <indexBar @selectCity="selectCity" v-if="!name" />
  </view>
</template>

<script setup lang="ts">
import { navBack } from '@/utils/navigator';
import indexBar from '@c/piaoyi-indexBar/piaoyi-indexBar.vue';
import { cities } from '@c/piaoyi-indexBar/city';
import { ref } from 'vue';
const name = ref('');
const searchLoc = ref('');
//点击地区回调
function selectCity(item) {
  navBack();
}
function search(e) {
  cities.map((item) => {
    if (item.name == e.detail.value) {
      name.value = e.detail.value;
    }
  });
}
function cancel() {
  name.value = '';
}
function comback() {
  navBack();
}
</script>

<style scoped lang="less">
.locationList {
  width: 95%;
  margin: 2.5%;
  background-color: white;
  border-radius: 5px;
  padding: 20rpx;
  box-sizing: border-box;
  .title {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }

  view:nth-of-type(2) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    text:nth-child(4n) {
      margin-right: 0px;
    }
    text {
      width: 23%;
      padding: 15rpx 10rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      text-align: center;
      border: 1px solid #999;
      border-radius: 5px;
      margin: 20rpx 2.5% 0px 0px;
    }
  }
}
.name {
  width: 95%;
  margin: 2.5%;
  padding: 20rpx;
  box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.uni-column {
  width: 95%;
  margin: 2.5%;
  background-color: white;
  border-radius: 5px;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>
